   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="submitForm">
        账号：<input type="text" v-model="collection.username" /><br />
        密码：<input type="password" v-model="collection.password" /><br />
    
        性别：
        男<input type="radio" name="sex" value="男" v-model="collection.sex" />
        女<input type="radio" name="sex" value="女" v-model="collection.sex" /><br/>
    
        爱好：
        吃饭<input type="checkbox" value="吃饭" v-model="collection.hobby">
        睡觉<input type="checkbox" value="睡觉" v-model="collection.hobby">
        打豆豆<input type="checkbox" value="打豆豆" v-model="collection.hobby"><br/>
    
        所属校区：
        <select v-model="collection.school">
          <option value="北京">北京</option>
          <option value="武汉">武汉</option>
          <option value="深圳">深圳</option>
        </select><br/>
    
        其他信息：<textarea v-model="collection.textarea"></textarea><br>
    
        <button type="submit">提交</button>
      </form>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          collection: {
            username: "",
            password: "",
            sex: "",
            hobby: [],
            school: "",
            textarea: ""
          }
        },
        methods: {
          submitForm() {
            console.log(this.collection);
            
          }
        }
      });
    </script>
  </body>
</html>
